<script setup>
import { onMounted, provide, ref } from 'vue'
import TableBody from './components/TableBody.vue'
import EditAndAdd from './components/EditAndAdd.vue'
import api from '@/api/index.js'

// 加载状态
const loading = ref(false)
// 大屏数据
const Data = ref([])
const productData = ref([])
const keyaddress = ref([])
const plantData = ref([])
// 抽屉节点
const drawer = ref()
// 当前数据保存
const curRow = ref({})

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const res = await api.getDpList()
    Data.value = JSON.parse(res.data.configInfo)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
const getproductList = async () => {
  try {
    loading.value = true
    const res = await api.getDpProductList()
    productData.value = JSON.parse(res.data.configInfo)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
const getkeySaleList = async () => {
  try {
    loading.value = true
    const res = await api.getDpkeySaleList()
    keyaddress.value = JSON.parse(res.data.configInfo)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

//获取种植面积数据
const getPlantList = async () => {
  try {
    loading.value = true
    const res = await api.getDpPlantList()
    plantData.value = JSON.parse(res.data.configInfo)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

const getData = () => {
  getkeySaleList()
  getproductList()
  getList()
  getPlantList()
}
const months = ref([])

const getPreviousMonths = () => {
  const currentDate = new Date()

  for (let i = 0; i < 12; i++) {
    const month = currentDate.getMonth() + 1 - i + 1
    const year = currentDate.getFullYear()
    const newDate = new Date(year, month - 1, 1)

    const formattedMonth = newDate.toISOString().slice(0, 7)
    months.value.push(formattedMonth)
  }
}

const subtitle = ref('')
// 编辑数据
const editItem = (e) => {
  drawer.value.open()
  subtitle.value = e
}

// 关闭弹窗处理
const closeDrawer = () => {
  curRow.value = {}
}

onMounted(() => {
  getPreviousMonths()
  getList()
  getproductList()
  getkeySaleList()
  getPlantList()
})

provide('editItem', editItem)
</script>

<template>
  <a-spin :spinning="loading" wrapperClassName="com-spin">
    <div class="com-full page">
      <div class="table">
        <TableBody
          @edit="editItem"
          :Data="Data"
          :months="months"
          :productData="productData"
          :keyaddress="keyaddress"
          :plantData="plantData"
        />
      </div>
    </div>
    <EditAndAdd
      ref="drawer"
      :faMenuSltOpt="Data"
      :curRow="curRow"
      @close="closeDrawer"
      @init="search({})"
      @reload="getData(savePara)"
      :subtitle="subtitle"
      :months="months"
      :productData="productData"
      :keyaddress="keyaddress"
      :plantData="plantData"
    />
  </a-spin>
</template>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .table {
    flex: 1;
    overflow: auto;
  }
}
</style>
